<template>
  <div class="oneChart"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'oneChart',
  data () {
    return {

    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      var myChart = echarts.init(document.querySelector('.oneChart'))
      // 指定配置和数据
      var option = {
        color: ['#2f89cf'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '0%',
          top: '10px',
          right: '0%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月'
            ],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              textStyle: {
                color: 'rgba(255,255,255,.6)',
                fontSize: '12'
              }
            },
            axisLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: 'rgba(255,255,255,.6)',
                fontSize: '12'
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.1)'
                // width: 1,
                // type: "solid"
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.1)'
              }
            }
          }
        ],
        series: [
          {
            name: '占比',
            type: 'bar',
            barWidth: '35%',
            data: [51.1,
              39,
              52.7,
              50.3,
              50.4,
              50.7,
              53.5,
              50.8,
              50.8],
            itemStyle: {
              barBorderRadius: 5
            }
          }
        ]
      }

      // 把配置给实例对象
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  }
}
</script>

<style scoped lang="less">
.oneChart{
    width: 100%;
    height: 100%;
    color: #fff;
}

</style>
